<!DOCTYPE html>
<html>

<head>
    <title>千锋教育——做真实的自己,用心做教育</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" href="./css/login.css">
    <link rel="stylesheet" href="./css/reset.css">
</head>

<body>
    <header></header>
    <section>
        <div class="login_box">
            <!-- <i>X</i> -->
            <div class="left l">
                <h4>账号密码登录</h4>
                <form action="" method="post">
                    <ul style="height: 285px;">
                        <li>
                            <input type="text" placeholder="请输入您的手机号" id="username" name="username"><span></span>
                        </li>
                        <li>
                            <input type="password" placeholder="请填写密码" id="userpass" name="userpass"><span></span>
                            <i class="iconfont icon-xiaoyanjing"></i>
                        </li>

                        <li style="position: relative;">
                            <input type="text" placeholder="请填验证码" class="yz yz1">
                            <div class="yzm">
                                <span
                                    style="display: inline-block; width: 50px;height: 40px; border: 1px solid #e5e5e5;text-align: center;line-height: 40px;"
                                    class="randCode"></span>
                                <a href="javascript:void(0)" class="a1">看不清楚？换一个</a>
                            </div>
                        </li>
                        <li style="margin-bottom: 0px;">
                            <a href="#" style="font-size: 10px; margin-left: 190px;">忘记密码？</a>
                        </li>
                        <li>
                            <button type="button" id="btnLogin">登录</button>
                        </li>
                    </ul>
                    <div style="font-size:10px;text-align:center;cursor: pointer; color: black;">
                        快捷登录 >
                    </div>
                </form>

                <p><span style="margin-right: 5px;"></span>第三方登录<span style="margin-left: 5px;"></span></p>
                <ul class="three">
                    <li>
                        <a href="#">
                            <img src="./images/weixin.png" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/weibo.png" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/qqlogin.png" alt="">
                        </a>
                    </li>
                </ul>

            </div>
            <div class="right r">
                <h4>新用户注册</h4>
                <ol>
                    <li>
                        <div class="le l">
                            <img src="./images/enjoy4.png" alt="">
                        </div>
                        <div class="ri r">
                            <h5>获得积分奖励</h5>
                            <p>每次购物都会自动得到积分奖励</p>
                        </div>
                    </li>
                    <li>
                        <div class="le l">
                            <img src="./images/bianzu.png" alt="">
                        </div>
                        <div class="ri r">
                            <h5>快速结算</h5>
                            <p>凭借我们的安全设置，您每次都可以快速浏览账单和配送信息</p>
                        </div>
                    </li>
                    <li>
                        <div class="le l">
                            <img src="./images/enjoy3.png" alt="">
                        </div>
                        <div class="ri r">
                            <h5>美丽奖励</h5>
                            <p>现在注册，尊享官网超值购物礼赠</p>
                        </div>
                    </li>
                </ol>
                <a href="./logon.html" class="kj">新用户注册</a>
            </div>
        </div>

    </section>
    <footer></footer>
</body>

</html>
<script src="./js/jQuery.js"></script>
<script src="./js/cookie.js"></script>
<!-- <script src="./goodsAndShoppingCart/login.php"></script> -->
<script>
    $("header").load("header.html");
    function CreateCode() {
        var code = "";
        var codeLength = 4;
        var codeTxt = $(".randCode");
        var randomCode = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
        for (let i = 0; i < codeLength; i++) {
            var index = Math.round(Math.random() * 35);
            code += randomCode[index];

        }
        codeTxt.html(code)
    }
    CreateCode();
    $(".a1").click(function () {
        CreateCode();
    })
    $(".yz1").blur(function () {
        if ($(this).val() == $(".randCode").html()) {
            flag = true;
        } else {
            flag = false;
            CreateCode();
            return alert("验证码不一致！")
        }
    });

    let oBtnLogin = document.getElementById("btnLogin");
    let oUserPass = document.getElementById("userpass");
    let oUserName = document.getElementById("username");

    oBtnLogin.onclick = function () {
        let xhr = new XMLHttpRequest();
        xhr.open("post", "./goodsAndShoppingCart/login.php", true);

        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                if (xhr.responseText.trim() == "success") {
                    alert("登录成功");
                    location.href = "index.html";
                    setCookie("username",$("#username").val(), 7);
                    // document.getElementById("msg").innerHTML = "登录成功";
                } else {
                    // document.getElementById("msg").innerHTML = "登录失败,用户名或者密码错误";
                    alert("登录失败,用户名或者密码错误");
                }
            }
        }

        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        let str = "username=" + oUserName.value + "&userpass=" + oUserPass.value;
        xhr.send(str);
        
    }
</script>